<!--
 * @Author: wangming
 * @Date: 2022-04-18 14:30:47
 * @LastEditors: wangming
 * @LastEditTime: 2022-05-10 10:50:45
 * @FilePath: /hanma-paas-mobile-fed/Users/wm/瀚川/hanma-application-designer-fed/src/pages/designUniversal/__components__/dynamicForm/rightModel/components/hlTableList/table_item_buttons.vue
 * @Description: 
-->
<template>
  <div v-if="!value.isRender">
    <el-divider>常用操作</el-divider>
    <el-form-item label="可见按钮数" class="tr">
      <xInput
        class="mr5"
        size="small"
        style="width: 22%"
        :value="value.customBtnShowNum"
        @input="outInput"
      ></xInput
      >个
    </el-form-item>
    <div class="ks-row-middle mb20 lh1">
      <div class="mr10 g3">添加按钮</div>
      <i
        class="el-icon-circle-plus-outline iconcolor f20 poi"
        @click="addTag"
      ></i>
    </div>
    <DragButtons :value="value" :getFormData="getFormData"></DragButtons>
    <BlockEditor ref="BlockEditor"></BlockEditor>
  </div>
</template>
<script>
import xInput from "@/components/xInput/index.js";
import basicmixins from "../basicmixins";
import BlockEditor from "@/components/blockly/BlockEditor";
import DragButtons from "./__components__/DragButtons.vue";
import addModuleBtn from "./__components__/addModuleBtn/index.js";
import { Events } from "@/utils/Dynamic.js";
import { uuid } from "@/utils/common.js";
import { mapGetters } from "vuex";
import MicroBlocklyEditor from "@/components/BlocklyEditor";
import { cloneDeep } from "lodash";

export default {
  components: { BlockEditor, DragButtons, xInput },
  mixins: [basicmixins],
  mounted() {
    this.setCustomBtn();
  },
  watch: {
    "value.key": {
      // 从一个表格擦操作切换到另一个表格操作
      handler(val) {
        if (val) {
          this.setCustomBtn();
        }
      },
    },
    immediate: true,
  },
  computed: {
    ...mapGetters(["getFormData"]),
  },
  methods: {
    setCustomBtn() {
      if (this.value.customBtnShowNum === undefined) {
        this.$set(this.value, "customBtnShowNum", 3);
      }
    },
    outInput(v) {
      this.value.customBtnShowNum = Number(v);
    },
    openBlockEditor(item) {
      // item里面可以拿到函数名
      const composerData = this.getFormData.composer?.find(
        (event) => event.composerKey === item.composerKey
      );
      const eventData = {
        ...item,
        eventXml: composerData.eventXml,
        eventJs: composerData.eventJs,
      };
      this.$refs.BlockEditor.open(eventData, this.value, (data) => {
        // 更新组件逻辑编排名称
        item.eventName = data.eventName;
        // 将变更之后的数据保存到全局
        composerData.eventName = data.eventName;
        composerData.eventXml = data.eventXml;
        composerData.eventJs = encodeURIComponent(data.eventJs);
      });
    },
    addTag() {
      addModuleBtn
        .addForm(
          {
            moduleId: this.value.moduleId,
            modelCode: this.value.modelCode,
            key: this.value.key,
            label: "自身表格选中列",
          },
          { cuestomBtn: this.value.tagName === "hlChildOperate" }
        )
        .then(
          ({
            buttonHandler,
            composeType,
            eventName,
            label,
            buttonType,
            systemAction,
            relatinonFormId,
            RuleConditions,
            isSecondaryConfirm,
            SecondaryConfirmCon,
            title_i18n,
            ConfirmCon_i18n,
            importTemplate // 导入模板参数
          }) => {
            const composerKey = this.value.tagName + "_click_" + uuid(4);
            const options = ["row", "index"];
            this.value.customBtn.unshift({
              label,
              handler: buttonHandler === "custom" ? "custom" : systemAction,
              eventName,
              composeType,
              composerKey,
              buttonType,
              relatinonFormId,
              RuleConditions,
              isSecondaryConfirm,
              SecondaryConfirmCon,
              title_i18n,
              ConfirmCon_i18n,
              importTemplate:cloneDeep(importTemplate)
            });
            if (buttonHandler === "custom") {
              if (composeType !== "logic") {
                // 全局添加js todo
                this.getFormData.js = Events.addFunctionJSON(
                  this.getFormData.js,
                  eventName,
                  options
                );
                this.$monacoEditor.showEdit("javascript", this.getFormData);
              } else {
                // 全局添加逻辑编排
                if (!this.getFormData?.composer) this.getFormData.composer = [];
                // this.getFormData.composer.push({
                //   eventName,
                //   componentId: composerKey,
                //   composerKey,
                // });
                // this.openBlockEditor({
                //   eventName,
                //   composeType,
                //   composerKey,
                //   event: { options },
                // });

                // ** start 使用新版编排新增数据 since v2.7.1 **
                const defaultData = {
                  eventName,
                  composerKey,
                  funcName: composerKey,
                  funcDesc: eventName,
                  componentId: composerKey,
                  componentType: "button",
                  eventType: "click",
                  eventMethod: "BLOCKLY",
                  funcParams: "context,row,index",
                  _MicroApp: true,
                };
                this.getFormData.composer.push(defaultData);
                MicroBlocklyEditor.openForDesktop(defaultData);
                // ** end **
              }
            }
          }
        );
    },
  },
};
</script>
